<template>
  <span
    v-if="!checked"
    @click="changeChecked"
    class="checkbox"></span>
  <span
    v-else
    @click="changeChecked"
    class="checkbox checked"></span>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const props = defineProps({
  checked: Boolean
})
const checked = ref<Boolean>(props.checked ? true : false)

const changeChecked = () => {
  checked.value = !checked.value
}
defineExpose({ checked })
</script>

<style lang="less" scoped>
.checkbox {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1px solid #e0e0e0;
  background-color: #fff;
  vertical-align: -5px;
  font-size: 16px;
  line-height: 18px;
  text-align: center;
  border-radius: 3px;
}

.checked::after {
  width: 18px;
  height: 18px;
  position: absolute;
  top: -1px;
  left: -1px;
  visibility: visible;
  text-align: center;
  content: '✓';
  color: #fff;
  font-weight: bold;
  background-color: #ff6900;
  border: 1px solid #ff6900;
  border-radius: 3px;
}
</style>
